<style scoped>
:deep() .user-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #E0E0E0;
}

.box {
    position: absolute;
    z-index: 25;
    min-width: 200px;
    top: 55px;
    right: 0px;
}

.dropdown-item {
    height: 40px;
    line-height: 40px;
    display: block;
    padding-left: 20px;
}

.dropdown-item:hover {
    background-color: #e9ecef;
    color: #1e2125;
}
</style>
<template>
    <li class="relative">
        <div @click.stop="isShow = !isShow" class="cursor-pointer">
            <AppImg class="user-img" :src="userInfo.data.user.avatar" alt="" />
        </div>
        <div ref="refBox" class=" box" v-show="isShow">
            <div class="flex items-center p-4">
                <AppImg class="user-img" :src="userInfo.data.user.avatar" alt="" />

                <div class="user-text pl-1">
                    <h6 class="text-lg">{{ userInfo.data.user.name }}</h6>
                    <p class="text-xm ">
                        {{ userInfo.data.user.type === 'admin' ? '管理员' : userInfo.data.user.type === 'master'
                            ? '校长' : userInfo.data.user.type === 'teacher'
                                ? '老师' : '学生' }}
                    </p>
                </div>
            </div>
            <div class="divider"></div>
            <ul>
                <li><router-link class="dropdown-item" to="/my">
                        <i class="feather-home me-1"></i> 主页
                    </router-link>
                </li>
                <li>
                    <a class="dropdown-item" href="instructor-edit-profile.html"><i
                            class="feather-star me-1"></i>编辑详情</a>
                </li>
                <li>

                    <div class="dropdown-item night-mode">
                        <span><i class="feather-moon me-1"></i> Night Mode </span>
                        <div class="form-check form-switch check-on m-0">
                            <input class="form-check-input" type="checkbox" id="night-mode">
                        </div>
                    </div>
                </li>
                <li>
                    <a class="dropdown-item" href="" @click="hQuit">
                        <i class="feather-log-out me-1"></i>
                        退出
                    </a>
                </li>
            </ul>
        </div>
    </li>
</template>
<script setup>
import useClickOutside from '@/utils/useClickOutside.js'
import { useRouter } from 'vue-router'
import useUseInfo from '@/store/user'
const userInfo = useUseInfo()
const refBox = ref(null)
useClickOutside(refBox, () => {
    console.log(isShow.value)
    if (isShow.value === true)
        isShow.value = false
})

// const cart = useCart();
const cart = []
const router = useRouter()
const hQuit = () => {
    // toast('退出了')
    userInfo.data.token = ''
    userInfo.data.user = {}
    router.push('/login')
}
const isShow = ref(false)
</script>